<template>
  <div>
    <div class="search">
      <!-- 搜索框 -->
      <div class="search-header">
        <div class="left">
          <router-link
            tag="i"
            to="/home/recommend"
            class="iconfont icon-xiangzuojiantou"
          >
          </router-link>
        </div>
        <div class="search">
          <div class="search-img">
            <i class="iconfont icon-sousuo"></i>
          </div>
          <input
            type="text"
            placeholder="最新菜谱"
            v-model="keyword"
            @keyup.enter="getRecipeSearchFun()"
          />
          <span v-if="keyword" @click="inpDel()">
            <i class="iconfont icon-guanbi"></i>
          </span>
        </div>
        <div class="right">
          <span @click="getRecipeSearchFun()">搜索</span>
        </div>
      </div>
      <!-- 搜索一 -->
      <div class="searchOne" v-if="searchType == 1">
        <!-- 热门搜索 -->
        <div class="searchOne-popular">
          <div class="popular-title">
            <span>热门搜索</span>
          </div>
          <div class="popular-content">
            <ul>
              <li v-for="(item, index) in hotList" :key="index">
                <span @click="searchHot(index)">
                  {{ item.title }}
                </span>
              </li>
              <!-- <li>
              <span>最新菜谱</span>
            </li>
            <li>
              <span>今日开运菜</span>
            </li>
            <li>
              <span>元旦</span>
            </li>
            <li>
              <span>新年蛋糕</span>
            </li>
            <li>
              <span>年夜饭</span>
            </li>
            <li>
              <span>红枣枸杞鸡汤</span>
            </li> -->
            </ul>
          </div>
        </div>
        <!-- 搜索历史 -->
        <div class="searchOne-history">
          <div class="historry-all">
            <span>搜索历史</span>
            <i class="iconfont icon-shanchu" @click="delAll(index)"></i>
          </div>
          <ul>
            <li v-for="(item, index) in historyList" :key="index">
              <span @click="search(index)">{{ item.keyword }}</span>
              <i class="iconfont icon-guanbi" @click="del(index)"></i>
            </li>
            <!-- <li>
              <span>最新菜谱</span>
              <i class="iconfont icon-guanbi"></i>
            </li>
            <li>
              <span>今日开运菜</span>
              <i class="iconfont icon-guanbi"></i>
            </li>
            <li>
              <span>元旦</span>
              <i class="iconfont icon-guanbi"></i>
            </li> -->
          </ul>
        </div>
      </div>
      <!-- 搜索二 -->
      <!-- 搜索三 -->
      <div class="searchThree" v-if="searchType == 3">
        <div class="searchThree-nav">
          <ul>
            <li :class="{ con: isType == 1 }" @click="switchOne()">综合</li>
            <li :class="{ con: isType == 2 }" @click="switchTwo()">收藏高</li>
            <li :class="{ con: isType == 3 }" @click="switchThree()">学做多</li>
            <li :class="{ con: isType == 4 }" @click="switchFour()">
              <span> 视频 <i class="iconfont icon-bofang"></i> </span>
            </li>
          </ul>
        </div>
        <div class="searchThree-content">
          <ul>
            <li v-for="(item, index) in searchList" :key="index">
              <div class="content-img" @click="jump(item.id)">
                <img :src="item.img" alt="" />
              </div>
              <div class="content-right">
                <span class="right-top">{{ item.n }}</span>
                <span class="right-center">
                  <span v-for="(k, i) in item.recipe_list_tags" :key="i">
                    {{ k.text }}
                  </span>
                </span>
                <div class="right-bottom">
                  <div class="bottom-img">
                    <img :src="item.a.p" alt="" />
                  </div>
                  <span>{{ item.a.n }}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecipeSearchHot, getRecipeSearch } from "../../api/home/search";
export default {
  data() {
    return {
      searchType: 1,
      isType: 1,
      hotList: [],
      historyList: [
        {
          keyword: "小寒",
        },
        {
          keyword: "年糕",
        },
        {
          keyword: "腊八粥",
        },
      ],
      index: "",
      keyword: "",
      searchList: [],
    };
  },
  methods: {
    //热门搜索
    getRecipeSearchHotFun() {
      getRecipeSearchHot().then((data) => {
        // console.log("热门搜索数据", data.result.suggestdetails);

        let suggestdetails = data.result.suggestdetails;
        this.hotList = suggestdetails.slice(0, 14);
      });
    },
    //菜谱搜索
    getRecipeSearchFun() {
      getRecipeSearch({
        keyword: this.keyword,
        order: 0,
        type: 0,
        offset: 0,
        limit: 20,
      }).then((data) => {
        // console.log("菜谱搜索数据", data.result.list);

        // 搜索过滤后数据
        let list = data.result.list;
        list.forEach((ele) => {
          if (ele.type == 13) {
            this.searchList.push(ele.r);
          }
        });
        // console.log("过滤后的数据", this.searchList);

        this.searchType = 3;

        this.historyList.push({ keyword: this.keyword });
        // console.log(this.historyList);
      });
    },
    //跳转到菜谱详情页面
    jump(id) {
      this.id = id;
      this.$router.push({
        name: "details",
        params: {
          id: this.id,
        },
      });
    },
    //删除搜索记录(单项)
    del(index) {
      this.historyList.splice(index, 1);
    },
    //删除搜索记录(全部)
    delAll(index) {
      this.historyList.splice(index, this.historyList.length);
    },
    //点击搜索历史进行搜索
    search(index) {
      this.keyword = this.historyList[index].keyword;
      this.getRecipeSearchFun();
    },
    //点击热门搜索进行搜索
    searchHot(index) {
      this.keyword = this.hotList[index].title;
      this.getRecipeSearchFun();
    },
    // 点击清除搜索框内容
    inpDel() {
      this.keyword = "";
    },
    switchOne() {
      this.isType = 1;
      this.order = 0;
      this.getRecipeSearchFun();
    },
    switchTwo() {
      this.isType = 2;
      this.order = 2;
      //   this.getRecipeSearchFun();
    },
    switchThree() {
      this.isType = 3;
      this.order = 3;
      //   this.getRecipeSearchFun();
    },
    switchFour() {
      this.isType = 4;
      this.type = 1;
      //   this.getRecipeSearchFun();
    },
  },
  created() {
    this.getRecipeSearchHotFun();
    // this.getRecipeSearchFun();
  },
  watch: {
    keyword() {
      if (this.keyword == "") {
        this.searchType = 1;
      }
    },
  },
};
</script>

<style lang="less">
.search {
  .search-header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    .left {
      margin: 0 20px;
      i {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .search {
      margin: 5px 0;
      border-radius: 5px;
      display: flex;
      .search-img {
        width: 30px;
        height: 40px;
        background-color: #f6f6f6;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        position: relative;
        i {
          position: absolute;
          top: 12px;
          left: 10px;
          font-size: 15px;
          color: #969696;
        }
      }
      input {
        width: 230px;
        height: 40px;
        border: transparent;
        background-color: #f6f6f6;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      input:focus {
        outline: none;
      }
      span {
        position: absolute;
        top: 16px;
        left: 290px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #cfcfcf;
        z-index: 6;
        i {
          position: absolute;
          top: 2px;
          left: 2px;
          font-size: 6px;
          color: #fff;
        }
      }
    }
    .right {
      margin-left: 15px;
      span {
        font-size: 14px;
        font-weight: bold;
        color: #1e1e1e;
      }
    }
  }
  .searchOne {
    .searchOne-popular {
      margin-top: 15px;
      .popular-title {
        margin: 20px 20px 0;
        span {
          font-size: 16px;
          font-weight: bold;
        }
      }
      .popular-content {
        margin: 0 20px 10px;
        ul {
          width: 310px;
          display: flex;
          flex-wrap: wrap;
          li {
            margin-top: 20px;
            margin-right: 10px;
            span {
              height: 25px;
              font-size: 12px;
              font-weight: bold;
              border-radius: 5px;
              color: #282828;
              // background-color: #fdfffe;
              background-color: #f4f4f4;
              padding: 5px 10px;
            }
          }
          li:nth-child(1) {
            span {
              border: 1px solid #c35949;
              color: #c35949;
            }
          }
          li:nth-child(2) {
            span {
              border: 1px solid #c35949;
              color: #c35949;
            }
          }
        }
      }
    }
    .searchOne-history {
      margin: 45px 20px 15px;
      .historry-all {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          font-size: 16px;
          font-weight: bold;
        }
        i {
          margin: 10px 0px;
          font-size: 20px;
          color: #8a8a8a;
        }
      }
      ul {
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-size: 14px;
            color: #222;
            margin: 10px 0;
          }
          i {
            font-size: 16px;
            font-weight: 600;
            margin: 10px 0;
            padding-right: 3px;
          }
        }
      }
    }
  }
  .searchThree {
    margin-top: 20px;
    .searchThree-nav {
      padding: 12px 0;
      border-bottom: 1px solid #f7f7f7;
      display: flex;
      justify-content: space-between;
      align-items: center;
      ul {
        margin-left: 20px;
        display: flex;
        align-items: center;
        li {
          margin-right: 20px;
          font-size: 14px;
          color: #737373;
          span {
            display: flex;
            align-items: center;
            margin-left: 110px;
            font-size: 14px;
            color: #3b3b3b;
            i {
              margin-top: 2px;
              margin-left: 5px;
            }
          }
        }
        .con {
          font-size: 15px;
          font-weight: bold;
          color: #222;
        }
      }
    }
    .searchThree-content {
      margin: 12px 15px;
      ul {
        li {
          margin-bottom: 15px;
          display: flex;
          .content-img {
            width: 180px;
            height: 125px;
            border-radius: 10px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
          }
          .content-right {
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            .right-top {
              width: 150px;
              font-size: 14px;
              font-weight: bold;
              color: #333;
              margin-top: 15px;
            }
            .right-center {
              width: 150px;
              font-size: 12px;
              color: #575958;
              margin-top: 10px;
              margin-left: 5px;
              display: flex;
              span {
                margin-left: 10px;
              }
            }
            .right-bottom {
              margin-top: 15px;
              display: flex;
              align-items: center;
              .bottom-img {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
              span {
                font-size: 12px;
                color: #878586;
                margin-left: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>